<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天勤科技考核题</title>

    <!-- 导入通用配置 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 导入整体页面布局样式 -->
    <link rel="stylesheet" href="./css/examine.css">
    <!-- 导入导航栏滑块样式 -->
    <link rel="stylesheet" href="./css/nav.css">
    <!-- 导入轮播图、展示内容模块样式 -->
    <link rel="stylesheet" href="./css/slider.css">
    <!-- echarts包 -->
    <script src="./lib/echarts.min.js"></script>
</head>

<body>
    <div class="wrapper">
        <!-- 页面顶部 -->
        <div class="top clearfix">
            <div class="logo left-float">LOGO</div>
            <div class="out right-float">
                <img class="set-up" src=""></img>
                <img class="remind" src=""></img>
                <button class="log-out">Log OUT</button>
            </div>
        </div>

        <!-- 主要内容 -->
        <div class="main clearfix">
            <!-- 顶部 -->
            <div class="header">
                <!-- 左侧 -->
                <div class="banner left-float">
                    <div>Audience Overview</div>
                    <div>Roseville,CA</div>
                </div>
                <!-- 右侧导航栏 -->
                <div class="nav right-float">
                    <!-- 底部线条 -->
                    <div class="line"></div>
                    <!-- 导航栏 -->
                    <nav>
                        <a href="javascript:;" class="selected">DASHBOARD</a>
                        <a href="javascript:;">PROJECTS</a>
                        <a href="javascript:;">CALENDAR</a>
                        <a href="javascript:;">MAILBOX</a>
                        <a href="javascript:;">SETTINGS</a>
                    </nav>
                </div>
            </div>
            <!-- 轮播、展示内容区 -->
            <div class="main-top clearfix">
                <!-- 轮播图 -->
                <div class="rotation left-float">
                    <div class="slider">
                        <img src="./images/img1.jpg" alt="">
                        <button class="prev">&lt;</button>
                        <button class="next">&gt;</button>
                        <ul class="slider-list">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <!-- 右侧展示内容 -->
                <div class="right-content right-float">
                    <div class="content-top">
                        <div>Support Requests</div>
                        <button>View All</button>
                    </div>

                    <div class="content-bottom">
                        <ul class="list">
                            <li>TIME</li>
                            <li>9:45pm</li>
                            <li>9:45pm</li>
                        </ul>
                        <ul class="list">
                            <li>USER NAME</li>
                            <li>info@design.com</li>
                            <li>info@design.com</li>
                        </ul>
                        <ul class="list-right">
                            <li>STATUS</li>
                            <div>Solved</div>
                            <div>Solved</div>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 中部折线图 -->
            <div class="mid left-float"></div>
            <!-- 底部饼图、柱状图 -->
            <div class="main-bottom">
                <!-- 左侧饼图 -->
                <div class="pie left-float"></div>
                <!-- 右侧柱状图 -->
                <div class="bar right-float"></div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="footer clearfix">
            <div class="logo left-float">LOGO</div>
            <!-- 底部内容区超链接 -->
            <div class="footer-content">
                <ul class="link-list">
                    <li><a href="#">NEWS</a></li>
                    <li><a href="#">CHANNELS</a></li>
                    <li><a href="#">OVERVIEW</a></li>
                    <li><a href="#">TIMELINE</a></li>
                </ul>
                <ul class="link-list">
                    <li><a href="#">SPORT</a></li>
                    <li><a href="#" class="obvious">CULTURE</a></li>
                    <li><a href="#">NATURE</a></li>
                    <li><a href="#">MUSIC</a></li>
                </ul>
                <ul class="link-list">
                    <li><a href="#">WEATHER</a></li>
                    <li><a href="#">AUTOS</a></li>
                    <li><a href="#">LOCAL</a></li>
                    <li><a href="#">SHOP</a></li>
                </ul>
                <ul class="link-list">
                    <li><a href="#">FUTURE</a></li>
                    <li><a href="#">FOOD</a></li>
                    <li><a href="#">EARTH</a></li>
                    <li><a href="#">TV</a></li>
                </ul>
                <ul class="link-list">
                    <li><a href="#">TRAVEL</a></li>
                    <li><a href="#">RADIO</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 引入导航栏 -->
    <script src="./js/nav.js"></script>
    <!-- 引入轮播图 -->
    <script src="./js/slider.js"></script>
    <!-- 引入折线图 -->
    <script src="./js/line_echarts.js"></script>
    <!-- 引入饼图 -->
    <script src="./js/pie_echarts.js"></script>
    <!-- 引入柱状图 -->
    <script src="./js/bar_echarts.js"></script>

</body>

</html>